本文同步發表於斜槓女紙部落格:Day21 寫於開始實作前(2):Vue.js的Methods以及監聽事件 (v-on)
實作到目前為止,大部分還在處理靜態網頁的畫面。但是呢~別忘了我們的設計稿是一份包含『預約訂房』功能可以與瀏覽者(消費者)互動的動態網頁。今天就要來和大家聊聊在Vue.js
中能掌控網頁元素所有動作的監聽事件(v-on)
。
v-on
是用來在HTML元素中加入事件監聽器,即可找到對應的事件處理方法。用在自定義元素組件上時,也可以監聽子組件觸發的自定義事件。同等於JavaSctipt
的addEventListener以及jQuery
中的.on()
在HTML元素上使用v-on
建立監聽事件時,我們並需在new Vue
中使用methods
這個屬性用來定義方法,如果我們在UI操作了什麼動作,都可以寫methods
去回傳方法,執行相對應的事件,通常methods
定義方法的方式是一個包住function
的object
。
methods
的function名稱
<button>
上利用v-on
綁定show
事件,點下按鈕實會跳出alert
<button v-on:click="show">點我出現alert</button>
new Vue({
el: '#demo',
methods: {
show: function (){
alert('哈囉你好嗎!');
return false;
},
},
})
inline statement
寫法say
這個method
傳入 一個『我是鐘小呆』的字串,注意字串要使用單引號 ‘
包起來。 點下按鈕後回直接回傳我們所帶入在v-on
的字串。<button v-on:click="say('我是鐘小呆')">行內敘述寫法,點我</button>
new Vue({
el: '#demo',
methods: {
say: function (message) {
alert(message)
},
},
})
Vue.js 藉由事件修飾符 (Event Modifiers) 處理了許多 DOM 事件的細節,讓我們能專注於程式邏輯的撰寫。
寫法為v-on:事件.修飾符
,如v-on:click..prevent
,也可同等於@click.prevent
修飾符號 | 用途 |
---|---|
.stop |
呼叫js中的event.stopPropagation() ,停止事件往父層繼續傳遞。 |
.prevent |
呼叫js中的event.preventDefault() ,防止執行瀏覽器事件的預設行為。 |
.capture |
可將事件的傳遞改由父層往子層傳遞。 |
.self |
僅僅觸發自己範圍的事件,不包含子層。 |
.native |
監聽元件根元素的原生事件。 |
.once |
事件只能被執行一次。 |
.passive |
2.3.0版本後加入,會以{ passive : true } 的模式添加事件監聽器。 |
今天就先與大家分享到這,明天終於要來看Scroll Down button
的實作過程囉!
參考資料
感謝分享
補充 new Vue() 是 Vue 2 的語法,
Vue 3 用 Vue.createApp() 取代 new Vue()
https://book.vue.tw/appendix/migration.html#%E5%85%83%E4%BB%B6%E5%AF%A6%E9%AB%94%E5%BB%BA%E7%AB%8B
Vue 2 support will end on Dec 31, 2023. Learn more about Vue 2 Extended LTS.
The Benefits of the New Vue 3 App Initialization Code